<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" />
    <link rel='stylesheet' href='/stylesheets/newcontent.css' />
    <link rel="shortcut icon" href="/images/miku.ico" type="image/x-icon" />

    <title><%= data.title %></title>
  </head>
  <body>
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="/">
          <img src="/images/miku.jpg" width="50" height="50" alt="">
          新闻&nbsp;NEWS&nbsp;&nbsp;&nbsp;
        </a>
        <% if(name){ %>
        <span class="navbar-text text-info">欢迎您，
          <a href="/" target="_blank" class="text-info"><%= name %></a>
        </span>&nbsp;&nbsp;&nbsp;
        <span class="navbar-text text-warning">
          <a href="/users/loginout" class="text-warning">登出</a>
        </span>
        <% }else{ %>
        <span class="navbar-text text-secondary">未登录，请
          <a href="/users/login" class="text-info">登录</a>
        </span>
        <% } %>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/politic">时政</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/military">军事</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/economic">财经</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/ent">娱乐</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/culture">文化</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/game">游戏</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                用户系统
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="/users" target="_blank">系统首页</a>
                <a class="dropdown-item" href="/users/login" target="_blank">登录</a>
                <a class="dropdown-item" href="/users/register" target="_blank">注册</a>
              </div>
            </li>
          </ul>
          <form action="/search" method="POST" class="form-inline" style="position: absolute;right: 0%;">
            <input class="form-control mr-sm-2" type="search" name="search" id="search" placeholder="请输入新闻关键字" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" id="sbtn" type="submit">Search</button>&nbsp;
          </form>
        </div>
      </nav>

      <main role="main" class="container border-gray">
        <div class="my-3 p-3 bg-white rounded shadow-sm">
          <h1 class="display-4"><%= data.title %></h1><br>
          <h5 class="display-6">[文/<%= data.author_brief %>&nbsp;<%= data.author %>]</h5>
          <p class="lead"><%- data.text.text %></p>
          <h5 class="display-6">[责任编辑/<%= data.user.user_name %>]</h5>
          <p style="text-align: right;">
            <img src="/images/heart.svg" th:src="@{/images/heart.svg}" alt="" width="32" height="32" title="我喜欢" style="cursor: pointer;" class="like" id="heart"/>
            &nbsp;<span class="quantity" id="thumb"><%= thumb %></span>
            <button class="sr-only" id="newid" value="<%= data.id %>"></button>
          </p>
        </div>
      </main>

      <main role="main" class="container">
        <form action="/newcontent/writecomment" method="POST">
          <div class="my-3 p-3 bg-white rounded shadow-sm">
            <h6 class="border-bottom border-gray pb-2 mb-0">我要评论</h6>
            <div class="media text-muted pt-3">
            <img class="bd-placeholder-img mr-2 rounded" src="/images/person.svg" alt="" width="32" height="32" />
            <textarea class="form-control" id="content" name="content" rows="5" placeholder="请自觉遵守互联网相关的政策法规，共同营造阳光、理性、平和、友善的跟评互动环境。"></textarea>
            <input type="submit" id="btn" class="btn btn-primary" value="发表评论"/>
            <% if(msg){ %>
              <div class="alert alert-secondary" role="alert" style="position: absolute;left: 45%;">
                <strong><%= msg %></strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
             </div>
            <% } %>

            <% if(!name){ %>
              <script type="text/javascript">
               var content = document.getElementById("content");
               var btn = document.getElementById("btn");
               content.oninput = function() {
                 alert("请先登录");
			           window.location.href="/users/login";
               }
               btn.onclick = function() {
			           alert("请先登录");
	             }
              </script>
            <% } %>
            </div>
        </form>

        <div class="my-3 p-3 bg-white rounded shadow-sm">
          <h6 class="border-bottom border-gray pb-2 mb-0">所有评论&nbsp;<%= num %>条</h6>
          <% comment.forEach(function(value){ %>
          <div class="media text-muted pt-3">
            <img class="bd-placeholder-img mr-2 rounded" src="/images/person.svg" alt="" width="32" height="32" />
            <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
              <strong class="d-block text-gray-dark"><%= value.user.user_name %></strong><br>
              <%= value.content %>
            </p>
          </div>
          <% }) %>

          <small class="d-block text-right mt-3">
            <a href="#newid">我要评论</a>
          </small>
        </div>
      </main>

      <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
          <p class="float-right">
            <a href="#">返回顶部</a>
          </p>
          <p><img src="/images/trails.png" width="100" height="100" alt="">
            &copy; 2020-2021 <img src="/images/miku.jpg" width="25" height="25" alt="">News  By 1840129171-黄楚贤&emsp;&emsp;
          <img src="/images/envelope.svg" alt="" width="32" height="32">
          &nbsp;<a href="mailto:1427756365@qq.com">1427756365@qq.com</a>&emsp;
          友情链接：<a href="https://www.guancha.cn/" target="_blank">观察者网</a> <a href="https://news.cctv.com/" target="_blank">央视新闻</a>
         </p>
        </div>
      </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="/javascripts/newcontent.js"></script>
    <script src="/javascripts/search.js"></script>
  </body>
</html>